<!-- name 属性用于给组件指定一个名称 -->
<script setup lang="ts" name="Car">
// ref 设置基本数据类型和对象类型数据的响应式 reactive 只能定义对象类型数据的响应式
import { ref, reactive} from 'vue';
// 使用 reactive 包装一个对象时，Vue 实际上会创建一个 Proxy 对象
// 该对象拦截了原始对象的所有属性访问和修改操作。
let car = reactive({brand:'宝马', price:100})
function add() {
    car.price += 1;
}
</script>

<template>
  <div class="person">
        <h1>一辆{{ car.brand }}车，价值{{ car.price }}万元。</h1>
        <br>
        <button @click="add()"><h1>点我增加一万</h1></button>
  </div>
</template>

<style>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 20px;
  padding: 20px;
}
</style>
